{layout name="common/layout" /}
<link rel="stylesheet" type="text/css" href="__MERCHANT_STATIC__/style/css/message/message.css?v=2017.10.25" />
<!-- 聊天窗口 -->
<!-- vue渲染 -->
<div class="message_main_talk">
	<h3 class="message_main_title">
		与{{normol.user_name}}对话中
	</h3>
	<!-- 留言交互框 -->
	<ul class="message_main_content">
		<template v-for="item in talkList">
			<template v-if="item.type==1">
				<li class="message_main_user">
					<!-- 头像 -->
					<img :src="normol.face_user"  class="message_main_avatar">
					<p class="message_main_usertext">
						{{item.content}}
					</p>

				</li>
				<div class="message_main_usertime">
					<span>{{item.create_time | dataForm}}</span>
				</div>
			</template>
			<template v-else>
				<li class="message_main_mine">
					<p class="message_main_usertext">
						{{item.content}}
					</p>
					<img :src="normol.face_merchant"   class="message_main_avatar">
				</li>
			</template>
		</template>
	</ul>
	<!-- 文本作用域 -->
	<textarea v-model="text" class="message_main_input" name="" id="" cols="30" rows="10">
	
					</textarea>
	<!-- 提交按钮 -->
	<button type="button" @click="submit" class="message_main_submit">
						发送
					</button>
</div>
<div class="Hui-article-box" style="margin-top: 37px;">
	<div class="newCrumbs ">消息中心
		<span class="c-gray en">&gt;</span>用户留言
	</div>
	<div class="Hui-article">

		<ul class="message_main_list">
			{foreach ($userMessage as $k =>$v)}
			<li class="message_main_single message_main_single--user {if $v['is_read'] eq '1'}message_main_single--read{else}message_main_single--unread{/if}" data-msgid="{$v['id']}"
			    data-uid="{$v['from_id']}">
				<p class="message_main_text">
					<i>{$v['nickname']}</i>
					<b>{$v['content']}</b>
				</p>
				<span class="message_main_time">
							<span>
									{$v['create_time']|date="Y-m-d H:i:s", ###}
							</span>
				</span>
			</li>
			{/foreach}
		</ul>
		<div class="cl">
			{$data->render()}
		</div>
	</div>
</div>

<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
<script>
"use strict";

Vue.filter('dataForm', function (value) {
	if (value) {
		return new Date(value * 1000).toTimeString().split(" ")[0];
	}
});
var isSubmit = false;
var app = new Vue({
	el: ".message_main_talk",
	data: function data() {
		return {
			id: "",
			normol: {},
			talkList: {},
			text: "",
			msgid: "",
			storeid: ""
		};
	},
	methods: {
		getTalkList: function getTalkList(id) {
			var self = this;
			self.text = "";
			$.ajax({
				url: "../../api/message/consultDetail",
				type: "POST",
				data: {
					user_id: self.id
					/* page */
				},
				async: true,
				dataType: "json",
				success: function success(response) {
					if (response.status == 1) {
						self.normol = response.data;
						self.talkList = response.data.list;
						setTimeout(function () {
							$(".message_main_content").scrollTop(500000);
						}, 20);
					}
				},
				error: function error(_error) {}
			});
		},
		/*  */
		submit: function submit() {
			var self = this;
			if ($.trim(self.text) == "") {
				self.text = "";
				return false;
			}
			$.ajax({
				url: "../../api/message/reply",
				type: "POST",
				data: {
					msg_id: self.msgid,
					content: self.text,
					store_id: self.talkList[0].store_id
				},
				async: true,
				dataType: "json",
				success: function success(response) {
					if (response.status == 1) {
						isSubmit = true;
						self.talkList.push({
							content: self.text,
							type: 2
						});
						setTimeout(function () {
							$(".message_main_content").scrollTop(500000);
						}, 20);
						self.text = "";
					}
				},
				error: function error(_error2) {}
			});
		}
	},
	mounted: function mounted() {}
});
$(".message_main_list").on("click", '.message_main_single', function () {
	var self = this;
	var id = $(this).data("msgid");
	app.msgid = id;
	app.id = $(this).data("uid");
	/* 触发消息按钮 */
	app.getTalkList();
	layer.open({
		type: 1,
		skin: 'layui-layer-demo', //样式类名
		closeBtn: 1, //不显示关闭按钮
		anim: 2,
		title: "留言回复",
		area: ['700px', '570px'],
		shadeClose: true, //开启遮罩关闭
		content: $(".message_main_talk"),
		cancel: function cancel() {
			if (isSubmit) {
				isSubmit = false;
				//window.location.reload();
			}
		}
	});
	/* 判断当前消息是否已读，已读消息不再发送请求 */
	if ($(this).hasClass("message_main_single--read")) {
		return false;
	} else {
		$.ajax({
			url: "../../api/message/readUserMessage",
			type: "POST",
			data: {
				msg_id: id
			},
			async: true,
			dataType: "json",
			success: function success(response) {
                if (response.status == 1) {
                    $(self).removeClass("message_main_single--unread").addClass("message_main_single--read");
                    if($('#message_count').text() > 1) {
                        $('#message_count').text($('#message_count').text() - 1);
                    }else{
                        $('#message_count').hide();
                    }
                }
			},
			error: function error(_error3) {}
		});
	}
});
</script>